<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>饿了么商家版</title>
    <style>
        html,body{
            width: 100%;
            height: 100%;
        }
        *{
            margin: 0;
            padding: 0;
        }
        .div-in{
            width: 1000px;
            height: 100%;
            margin: 0 auto;
        }
        a{
            text-decoration: none;
            color: #0091ea;
            font-size: 14px;
        }
        .header{
            width: 100%;
            height: 60px;
        }
        .header-left{
            float: left;
            width: 180px;
            height: 60px;
            line-height: 60px;
            font-weight: normal;
            font-size: 18px;
            color: #333;
            position: absolute;
        }
        .header-left img{
            width: 70px;
            vertical-align:text-bottom;
            position: relative;
            left:0px;
            top:-2px;
        }
        .header-left span{
            margin: 0 10px;
            color: #999;
        }
        .header-right{
            float:right;
            height: 60px;
            line-height: 60px;
        }
        .header-right ul{
            margin-top: 10px;
        }
        .header-right li{
            /*float: left;*/
            /*width: 92px;*/
            font-weight: 700;
            /*display: block;*/
            float: left;
            width: 50px;
            height: 38px;
            line-height: 38px;
            text-align: center;
            margin-left: 50px;
            list-style: none;
        }
        .header-right ul>li:nth-child(2) a{
            color: #999;
        }
        .header-right ul>li:nth-child(3){
            width: 92px;
            font-weight: 400;
            border-radius: 4px;
            border: 1px solid #0091ea;
        }
        .main01{
            width: 100%;
            height:430px;
            background: linear-gradient(#0091ea,#0091ea),linear-gradient(to bottom,#0074f6,#0885ea);
        }

        .main1{
            width: 100%;
            height: 430px;
        }
        .main1-left{
            float: left;
            width: 600px;
            height: 430px;
            color: white;
        }
        .title{
            margin: 80px 0px 40px 30px;
        }
        .title h1{
            margin-bottom: 6px;
            font-size: 38px;
        }
        .title h1 span{
            padding:0 10px;
        }
        .title p{
            margin-bottom: 10px;
        }
        .download{

            margin-left: 30px;
        }
        .download-left{
            float: left;
        }
        .download-left img{
            width: 115px;
            height: 114px;
        }
        .download-right{
            float: left;
            margin-left: 40px;
        }
        .anzhuo{
            padding: 13px 20px;
            border: 1px solid #fff;
            border-radius: 25px;
        }
        .anzhuo img{
            width: 20px;
            height: 20px;
            vertical-align: text-bottom;
        }
        .anzhuo a{
            color: white;
        }
        .pingguo{
            margin-top: 10px;
            padding: 13px 20px;
            border: 1px solid #fff;
            border-radius: 25px;
        }
        .pingguo img{
            width: 20px;
            height: 20px;
            vertical-align: text-bottom;
        }
        .pingguo a{
            color: white;
        }
        .main1-right{
            float: right;
            width: 400px;
            height: 430px;
        }
        .main1-right img{
            height: 390px;
            margin-top: 40px;
        }

        .content{
            width: 100%;
            height:2750px;
        }
        .div1{
            width: 100%;
            height: 550px;
            background-color: #f5f5f5;
        }
        .div1-left img{
            float: left;
            width: 600px;
            height: 550px;
        }
        .div1-right{
            float: left;
            margin-left: 50px;
        }
        .div1-right h1{
            font-weight: 400;
            font-size: 38px;
            color: #333;
            margin-top: 220px;
        }
        .div1-right p{
            font-size: 18px;
            color: #666;
            margin-top: 29px;
        }

        .div2{
            width: 100%;
            height: 550px;
        }
        .div2-left{
            float: left;
            width: 345px;
            height: 550px;
            margin-left: 50px;
        }
        .div2-left h1{
            font-weight: 400;
            font-size: 38px;
            margin-top: 223px;
            color: #333;
        }
        .div2-left p{
            font-size: 18px;
            color: #666;
            margin-top: 29px;
        }
        .div2-right img{
            float: left;
            width: 600px;
            height: 550px;
        }

        .div3{

            height: 550px;
            background-color: #f5f5f5;
            box-sizing: content-box;
        }
        .div3-left img{
            float: left;
            width: 600px;
            height: 550px;
        }
        .div3-right{
            float: right;
            width: 400px;
            height: 550px;
        }
        .div3-right h1{
            font-weight: 400;
            font-size: 38px;
            margin-top: 210px;
            color: #333;
        }
        .div3-right p{
            width: 288px;
            font-size: 18px;
            color: #666;
            margin-top: 27px;
        }

        .div4{
            width: 100%;
            height: 550px;
        }
        .div4-left{
            float: left;
            width: 300px;
            height: 550px;
            margin-left: 50px;
        }
        .div4-left h1{
            font-weight: 400;
            font-size: 38px;
            margin-top: 220px;
            color: #333;
        }
        .div4-left p{
            width: 342px;
            font-size: 18px;
            color: #666;
            margin-top: 27px;
        }
        .div4-right img{
            float: left;
            width: 600px;
            height: 550px;
        }

        .div5{
            width: 100%;
            height: 550px;
            background-color: #f5f5f5;
        }
        .div5-left img{
            float: left;
            width: 600px;
        }
        .div5-right{
            float: left;
        }
        .div5-right h1{
            font-weight: 400;
            font-size: 38px;
            margin-top: 220px;
            color: #333;
        }
        .div5-right p{
            width: 342px;
            font-size: 18px;
            color: #666;
            margin-top: 27px;
        }
        .content-section:nth-child(odd){
            background-color: #f5f5f5;
        }

        .footer-in p{
            padding: 48px 0px;
            color: white;
            font-size: 14px;
            text-align: center;
        }
        .footer{
            width: 100%;
            height: 115px;
            background-color: #0091ea ;
        }
    </style>
</head>
<body>
<div class="header">
    <div class="header-in div-in">
        <div class="header-left">
            <img src="images/eleme_logo.svg" alt="">
            <span>|</span>
            商家中心
        </div>
        <div class="header-right">
            <ul>
                <li><a href="#">手机端</a></li>
                <li><a href="#">电脑端</a></li>
                <li><a href="#">我要开店</a></li>
            </ul>

        </div>
    </div>
</div>
<div class="main01">
    <div class="main-in div-in">
        <div class="main1">
            <div class="main1-left">
                <div class="title">
                    <h1>饿了么商家版<span>|</span>手机端</h1>
                    <p>用手机在网上开餐厅，随时随地接订单。</p>
                    <p>支持 iOS8 及安卓 4.0 以上系统</p>
                </div>
                <div class="download">
                    <div class="download-left">
                        <img src="images/qrcode.png" alt="">
                    </div>
                    <div class="download-right">
                        <div class="anzhuo">
                            <img src="images/android.png" alt="">
                            <a>Android 下载</a>
                        </div>
                        <div class="pingguo">
                            <img src="images/ios.png" alt="">
                            <a>ios 下载</a>
                        </div>
                    </div>
                </div>
            </div>
            <div class="main1-right">
                <img src="images/mobile01.png" alt="">
            </div>
        </div>
    </div>
</div>
<div class="content">
    <div class="content-section">
        <div class="div-in"><div class="div1">
            <div1 class="div1-left">
                <img src="images/mobile02.png" alt="">
            </div1>
            <div class="div1-right">
                <h1>超快速订单处理</h1>
                <p>智能自动接单，多场景语音服务支持</p>
            </div>
        </div></div></div>
    <div class="content-section"><div class="div-in"><div class="div2">
        <div class="div2-left">
            <h1>多维度查询订单</h1>
            <p>实时查询订单、配送状态、售出商品统计</p>
        </div>
        <div class="div2-right">
            <img src="images/mobile03.png" alt="">
        </div>
    </div></div></div>
    <div class="content-section"><div class="div-in"><div class="div3">
        <div class="div3-left">
            <img src="images/mobile04.png" alt="">
        </div>
        <div class="div3-right">
            <h1>全方位管理店铺</h1>
            <p>按营业时间自动开关店，快捷方便的
                商品管理，随意设定配送范围</p>
        </div>
    </div></div></div>
    <div class="content-section"><div class="div-in"><div class="div4">
        <div class="div4-left">
            <h1>高精度账单查询</h1>
            <p>安全专业的财务管理，各项资金一目了然，
                精细的流水方便财务对账</p>
        </div>
        <div class="div4-right">
            <img src="images/mobile05.png" alt="">
        </div>
    </div></div></div>
    <div class="content-section"><div class="div-in"><div class="div5">
        <div class="div5-left">
            <img src="images/mobile06.png" alt="">
        </div>
        <div class="div5-right">
            <h1>高效率解决问题</h1>
            <p>在线客服、电话客服24小时实时为您服务</p>
        </div>
    </div></div></div>
</div>
<div class="footer">
    <div class="footer-in div-in">
        <p>Copyright ©2018 ele.me, All Rights Reserved.</p>
    </div>
</div>

</body>
</html>